/**
{
"style":{
"navigationBarTitleText":"新增地址",
"navigationStyle": "default"
}
}
*/

<template>
	<view class="page-bg">
		<view class="form-box">
			<view class="item flex-tbc">
				<view class="title">收货人</view>
				<u--input v-model="formData.name" placeholder="请输入收货人" border="none" inputAlign="left"
					placeholderStyle="color: #9C9C9C"></u--input>
			</view>

			<view class="item flex-tbc">
				<view class="title">手机号码</view>
				<u--input v-model="formData.mobile" placeholder="请输入手机号码" border="none" inputAlign="left"
					placeholderStyle="color: #9C9C9C"></u--input>
			</view>

			<view class="item flex-tbc" @click="onShowReg">
				<view class="title">选择地区</view>
				<!-- placeholder="" -->
				<picker-text class="pl-56 picker-s" :pickerValue="cityC" />
				<!-- <image class="row-right" src="/static/images/row-r-3.png" mode=""></image> -->
				<!-- <u--input placeholder="请输入手机号码" border="none" inputAlign="left"
					placeholderStyle="color: #9C9C9C"></u--input> -->
			</view>

			<view class="item flex-tbc">
				<view class="title">详细地址</view>
				<u--input v-model="formData.address" placeholder="请输入详细地址" border="none" inputAlign="left"
					placeholderStyle="color: #9C9C9C"></u--input>
			</view>
		</view>

		<view class="item-3 flex-lr-tbc">
			<view class="title-3">设为默认</view>
			<u-switch v-model="isDefault" size="20" activeColor="#0F956E" inactiveColor="#dadada"></u-switch>
		</view>

		<view class="plr24 mt32">
			<view class="btn-w" @click="onSave">保存</view>
		</view>

		<!-- 		<regions
			ref="regions"
			:show="showReg"
			:defaultValue="areaA"
			@colse="showReg = false"
			@confirm="saveRegions"
		></regions> -->
		<ssq-picker v-model="array" ref="ssqRef" @change="changessq" />
	</view>
</template>
<script setup>
	import pickerText from '@/components/picker-text.vue'
	import {
		ref,
		onMounted,
		reactive,
		nextTick
	} from 'vue'
	const isiPhone = ref('')
	const statusBar = ref('')
	const customBar = ref('')
	const getPageInfo = () => {}
	const initPage = () => {
		isiPhone.value = uni.getStorageSync('isiPhone')
		statusBar.value = uni.getStorageSync('statusBar')
		customBar.value = uni.getStorageSync('customBar')
	}

	const formData = reactive({
		id: '',
		name: '',
		mobile: '',
		area: '',
		// province: '', // 省
		// city: '', // 市
		// district: '', // 区
		address: '',
		is_default: 0
	})
	const isDefault = ref(false)
	const cityC = ref('')

	const onSave = async () => {
		if (!formData.name) {
			uni.showToast({
				title: '请输入姓名',
				icon: 'none'
			})
			return
		}
		if (!formData.mobile) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		if (!/^1\d{10}$/.test(formData.mobile)) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}
		if (!cityC.value) {
			uni.showToast({
				title: '请选择地区',
				icon: 'none'
			})
			return
		}
		if (!formData.address) {
			uni.showToast({
				title: '请输入详细地址',
				icon: 'none'
			})
			return
		}
		formData.is_default = isDefault.value ? 1 : 0
		const res = await $post('/user/edit_address_info', formData)

		uni.showToast({
			title: '保存成功',
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateBack({
				delta: 1
			})
		}, 300)
	}
	const array = ref([])
	const ssqRef = ref(null)
	const onShowReg = () => {
		ssqRef.value.open()
	}

	const changessq = (e) => {
		formData.area = cityC.value = e[0] + '/' + e[1] + '/' + e[2]
		// formData.province = e[0] // 省
		// formData.city = e[1] // 市
		// formData.district = e[2] // 区
	}

	const getAddressData = () => {
		if (formData.id) {
			uni.showLoading({
				title: '加载中'
			})
			$post('/user/get_address_info', {
				id: formData.id
			}).then(res => {
				uni.hideLoading()
				formData.name = res.info.name
				formData.mobile = res.info.mobile
				// formData.province = res.province
				// formData.city = res.city
				// formData.district = res.district
				formData.area = cityC.value = res.info.area
				formData.address = res.info.address
				formData.is_default = res.info.is_default
				isDefault.value = res.info.is_default == 1 ? true : false
				// cityC.value = res.province + '/' + res.city + '/' + res.district
				array.value = cityC.value.split('/')
				console.log(array.value)		
			})
		}

	}

	Vue.onShow(() => {
		initPage()
	})

	Vue.onLoad((options) => {
		formData.id = options.id
		getAddressData()
	})
</script>
<style scoped lang='scss'>
	.page-bg {
		padding-top: 1px;
	}

	.form-box {
		margin-top: 30rpx;
		background-color: #fff;

		.item {
			padding: 32rpx 24rpx;

			.title {
				width: 180rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}

	.item-3 {
		margin-top: 20rpx;
		width: 100%;
		height: 110rpx;
		background: #ffffff;
		padding: 0 24rpx;

		.title-3 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.row-right {
		width: 9rpx;
		height: 19rpx;
		margin-left: auto;
	}
</style>